<template>
	<view class="background1">
		<view class="mainpadding">
			<view class="adddizhiout">
				<view class="items">
					<view class="ileft" style="margin-right:120rpx ;">收货人</view>
					<input class="inputt " v-model="adressinfo.personname" placeholder="请输入收货人姓名" />
				</view>
				<view class="items">
					<view class="ileft">手机号码</view>
					<input class="inputt" v-model="adressinfo.phone" placeholder="请输入收货人手机号" />
				</view>
				<view class="items ">
					<view class="ileft">选择地址</view>
					<view class="sx flexbetween">
						<uni-data-picker @change="bindPickerChange" :localdata="items" placeholder="请选择住址"
							popup-title="请选择地区" v-model="area" class="zdy">
							<text class="choosedizhi " v-if="!area.length">请选择住址</text>
							<text class="dizhis" v-else>{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
						</uni-data-picker>
						<view class="rightarrow"></view>
					</view>
				</view>
				<view class="items">
					<view class="ileft">详细地址</view>
					<input class="inputt" v-model="adressinfo.detaildizhi" placeholder="街道、楼牌号等" />
				</view>
				<view class="item1">
					<view class="flexbetween">
						<view class="ileft">设为默认地址</view>
						<view class="switch2">
							<u-switch class="right" size="14" @change="change" v-model="adressinfo.status"></u-switch>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tanbtn btn" @click="adddizhi()">
			<view class="btn-container" style="background-color: rgba(12, 224, 239, 1);">确定</view>
		</view>
	</view>
</template>

<script>
	import citys from "../../static/city/city.js"
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				pickshow: false,
				area: [], //收获地址
				address: {
					province: "", //省
					city: "", //市
					county: "", //区
				},
				items: citys.data,
				adressinfo: {
					personname: '',
					phone: '',
					detaildizhi: '',
					status: false
				},
			};
		},
		onShow() {
			this.dizhixq()
		},
		methods: {
			change(e) {
				this.adressinfo.status = e
			},
			//添加地址
			adddizhi() {
				const reg = /^1[3578]\d{9}$/
				if (!this.adressinfo.phone.match(reg)) {
					httpRequest.toast("手机号格式不正确,请重新输入!")
					return false
				}
				uni.showLoading({
					title: '请稍候...',
					mask: true
				})
				let _this = this;
				if (_this.name == '') {
					uni.hideLoading()
					httpRequest.toast('请输入名字');
					return false;
				}
				if (_this.phone == "") {
					uni.hideLoading()
					httpRequest.toast('请输入手机号');
					return false;
				}
				if (_this.area == false) {
					uni.hideLoading()
					httpRequest.toast('请选择地址');
					return false;
				}
				if (_this.addressDetail == false) {
					uni.hideLoading()
					httpRequest.toast('请输入详细地址');
					return false;
				}
				if (this.listid) {
					this.xiugdz()
				} else {
					httpRequest.request('api/user/addAddress', 'GET', {
						province_id: this.address.province,
						city_id: this.address.city,
						area_id: this.address.county,
						name: this.adressinfo.personname,
						mobile: this.adressinfo.phone,
						address_detail: this.adressinfo.detaildizhi,
						status: this.adressinfo.status = true ? 1 : 0
					}, false, false, true).then(res => {
						httpRequest.toast(res.msg)
						if (res.code == 1) {
							setTimeout(() => {
								uni.navigateBack(1)
							}, 1000)
						}
					}).catch(err => {
						httpRequest.toast(err.msg);
					})
				}
			},
			// 地址详情接口
			dizhixq() {
				httpRequest.request('api/user/addressDetail', 'GET', {
					// 传参
					id: this.listid
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.area = res.data.cityinfo.split("/")
						this.address.province = res.data.province_id
						this.address.city = res.data.city_id
						this.address.county = res.data.area_id
						this.adressinfo.personname = res.data.name
						this.adressinfo.phone = res.data.mobile
						this.adressinfo.detaildizhi = res.data.address_detail
						this.adressinfo.status = res.data.status == 1 ? true : false
					}
				})
			},
			bindPickerChange(val) {
				let area = val.detail.value
				this.area = [area[0].text, area[1].text, area[2].text];
				this.address.province = area[0].value;
				this.address.city = area[1].value;
				this.address.county = area[2].value;
			},
			//修改地址
			xiugdz() {
				httpRequest.request('api/user/editAddress', 'POST', {
					// 传参
					id: this.listid,
					name: this.adressinfo.personname,
					mobile: this.adressinfo.phone,
					address_detail: this.adressinfo.detaildizhi,
					status: this.adressinfo.status ? 1 : 0,
					province_id: this.address.province,
					city_id: this.address.city,
					area_id: this.address.county
				}, false, false, true).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			},
		},
		onLoad(options) {
			this.listid = options.id;
			if (this.listid) {
				this.titletext = "编辑收货地址"
			} else {
				this.titletext = "新增收货地址"
			}
		}
	}
</script>

<style lang="scss">
	.background1 {
		background-color: #fafafa;
		min-height: 100vh;
		box-sizing:border-box;
	}

	.adddizhiout {
		padding: 30rpx;
	}

	.ileft {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
		line-height: 33rpx;
		margin-right: 100rpx;
	}

	.items {
		display: flex;
		align-items: center;
	}


	.inputt {
		flex: 1;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 33rpx;
		padding: 20rpx 0;
		text-align: left;
		border-bottom: solid 2rpx rgba(241, 241, 241, 1);
	}

	.choosedizhi {
		color: #999999;
		flex: 1;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 33rpx;
		padding: 20rpx 0;
		text-align: left;
		border-bottom: solid 2rpx rgba(241, 241, 241, 1);
	}

	.sx {
		border-bottom: solid 2rpx rgba(241, 241, 241, 1);
		flex: 1;
	}

	.txt {
		border-bottom: none;
	}

	.inputt::placeholder {
		color: #999999;
	}

	.item1 {
		padding: 30rpx 0;
	}

	.moren {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;

	}

	.switch2 {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
	}

	.zdy {
		width: 100%;
		padding: 20rpx 0;
	}

	.inputs1 {
		width: 100%;
	}
</style>
